<template>
    <div class="search">
        <navBar>
            <van-search v-model="valuem" placeholder="请输入搜索关键词" @clear="onClear" />
            <template #my>
                <span v-show="!valuem">取消</span>
                <span v-show="valuem" @click="searchFn">搜索</span>
            </template>
        </navBar>
        <div class="con">
            <div class="search-jie" v-show="searchFlag">
                <h2>搜索结果</h2>
                <itemty v-for="v in List" :v="v"></itemty>
                <h1 v-if="List.length==0">没有更多数据了</h1>
            </div>
            <div class="search-li" v-show=" !searchFlag">
                <h2>搜索历史 <span @click="mei">删除所有</span></h2>
                <div class="search-list">
                    <div class="search-item" v-for="(ele,ind) in searchList" :key="ind" @click="sear(ele)"
                        @touchstart="gtouchstart()" @touchmove="gtouchmove()" @touchend="showDeleteButton()">
                        {{ele}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { getCourseBasis } from "../http/course"
import {ref,watch} from "vue"
import itemty from "../components/conten/itemty.vue"
let searchList1 = localStorage.getItem('searchList1') ? JSON.parse(localStorage.getItem('searchList1')) : []
const valuem=ref("")
const List=ref([])
let searchList=searchList1.slice(0, 5)
watch(() => valuem,()=>{
    let filterList = searchList1.filter((v) => { return v.includes(n) })
            searchList = filterList.slice(0, 5)
            if (!n) {
                searchFlag.value = false
            }
})
const timeOutEvent=ref(0)
const searchFlag=ref(false)
const searchFn= async ()=>{
    searchFlag.value = true
    let index = searchList1.findIndex((v) => v == valuem.value)
    if (index != -1) {
        searchList1.splice(index, 1)
    }
    searchList1.unshift(valuem.value)
    localStorage.setItem('searchList1', JSON.stringify(searchList1))
    let res = await getCourseBasis({
        keywords: valuem.value,
        course_type: 0,
        page: 1,
        limit: 10
    })
    List.value = res.data.list

}
const onClear=()=>{
    console.log(666);
}
const mei=()=>{
    searchList = []
    localStorage.removeItem("searchList1")
}
const gtouchstart=()=>{
    timeOutEvent.value = setTimeout(function () {
        timeOutEvent.value=0
       longPress();
    }, 500); //这里设置定时器，定义长按500毫秒触发长按事件
    return false;
}
const showDeleteButton=()=>{
    clearTimeout(timeOutEvent.value); //清除定时器
    if (timeOutEvent.value!= 0) {
        //这里写要执行的内容（如onclick事件）
        // console.log("点击但未长按");
        sear
    }
    return false;

}
const gtouchmove=()=>{
    clearTimeout(timeOutEvent.value); //清除定时器
    timeOutEvent.value = 0;
}
const longPress=()=>{
    timeOutEvent.value = 0;
    console.log(searchList);
    searchList.splice(0, 1)
}
const sear=(ele)=>{
    valuem.value = ele
    searchFn()
}
</script>

<style lang="scss">
.search {
    overflow: hidden;
}

.van-search {
    width: 80vw;
    height: 8vh;
}

.con {
    margin-top: 70px;
    height: 92vh;
}

.search-list {
    display: flex;
}

.search-item {
    margin: 10px;
    padding: 10px;
    width: 50px;
    height: 50px;
    background-color: orange;
    color: #fff;
    font-size: 16px;
    text-align: center;
    line-height: 50px;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none;
}
</style>
